import React from 'react';
import { View } from 'react-native';
import List from '../list/List';
import Stepper from './Stepper';

// function onChange(value) {
//   console.log('changed', value);
// }

export default class StepperDemo extends React.Component{

  onChange=(value)=> {
    console.log('changed', value);
  }

  render() {
    const readOnly = (
      <Stepper
        size="small"
        key="1"
        max={10}
        min={1}
        readOnly={false}
        defaultValue={1}
        onChange={this.onChange} //注意此处不能绑定当前对象
      />
    );
    return (
      <View style={{ marginTop: 20 }}>
        <List>
          <List.Item
            extra={
              <Stepper
                key="0"
                readOnly //可读，不可编辑
                max={10}
                min={1}
                defaultValue={3}
                onChange={this.onChange}
              />
            }
          >
            readOnly: true
          </List.Item>
          <List.Item extra={readOnly}>readOnly: false</List.Item>
          <List.Item
            extra={
              <Stepper
                key="2"
                disabled //不能任何操作
                max={10}
                min={1}
                defaultValue={3}
                onChange={this.onChange}
              />
            }
          >
            Disabled
          </List.Item>
        </List>
      </View>
    );
  }
}
